import HelloWorld from '@/components/HelloWorld'
import PageOne from '@/components/PageOne'
import PageTwo from '@/components/PageTwo'
import PageThree from '@/components/PageThree'
import AutoRouterPage from '@/components/routerPractise/autoRouterPage'
import InsertRouter from '@/components/routerPractise/InsertRouter'
import InsertRouterHome from '@/components/routerPractise/InsertRouterHome'
import Handsome from '@/components/routerPractise/Handsome'
import Beauty from '@/components/routerPractise/Beauty'

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/pageone',
    name: 'PageOne',
    component: PageOne
  },
  {
    path: '/pagetwo',
    name: 'PageTwo',
    component: PageTwo
  },
  {
    path: '/pagethree',
    name: 'PageThree',
    component: PageThree
  },
  { //  动态路由例子  :id 绑定参数
    path: '/page/:id',
    name: 'AutoRouterPage',
    component: AutoRouterPage,
    // 向路由组件传递props,这样就可以在任何地方该组件，使得组件更易于重用和测试。
    props: true
  },
  { //  嵌套路由例子
    path: '/insertRouter',
    name: 'InsertRouter',
    component: InsertRouter,
    children: [
      {
        path: '',
        name: 'InsertRouterHome',
        component: InsertRouterHome
      },
      {
        path: 'handsome',
        name: 'Handsome',
        component: Handsome
      },
      {
        path: 'beauty',
        name: 'Beauty',
        component: Beauty
      }
    ]
  }
]

export default routes
